<template>
<div id="chart"></div>
<div>
    <select v-model="column">
        <option>body_type</option>
        <option>fuel_type</option>
        <option>gearbox</option>
        <option>not_repaired_damage</option>
    </select><button @click.stop="draw()">刷新</button>    
</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios';

export default{
    data(){
        return{
            column:"body_type",
            ChartOption:{
                title: { text: "body_type" },
                xAxis: {},
                yAxis: {
                    textStyle:{
                        color:'rgb(0,0,0,0.9)'
                    }
                },
                series: [],
                legend:{
                    textStyle:{
                        color:'rgb(0,0,0,0.9)'
                    }
                }
            }
        }
    },
    mounted(){
        this.draw();
    },
    inject:["need_wait","neednt_wait","set_err"],
    methods:{
        draw(){
            this.need_wait()
            axios.get("/price/charts",{params:{column:this.column}})
            .then(response=>{
                var title = {text: this.column}
                var xAxis = {
                    textStyle:{
                        color:'rgb(0,0,0,0.9)'
                    },
                    data: []
                }
                var series = [
                    {
                        name: 'true',
                        type: 'bar',
                        data: []
                    },{
                        name: 'false',
                        type: 'bar',
                        data: []
                    }
                ]
                response.data.data.forEach(element => {
                    if(element.certain){
                        xAxis.data.push(element.column)
                        series[0].data.push(element.price)
                    }else{
                        series[1].data.push(element.price)
                    }
                });
                this.ChartOption.title = title
                this.ChartOption.xAxis = xAxis
                this.ChartOption.series = series
                
                this.set_err(response.data.err)
            })
            .catch((error)=> {
                this.set_err(error);
            });
            echarts.init(document.getElementById('chart')).dispose()
            echarts.init(document.getElementById('chart')).setOption(this.ChartOption)
            this.neednt_wait()
        }   
    }
}
</script>
<style scoped>
#chart{
    width: 1770px;
    height: 695px;
}
</style>